<template>
    <div>
        <div>
            <div style="margin-top: 10px;display: flex;justify-content: left">
                <el-button icon="el-icon-plus" type="primary" @click="openDialog()">新增店铺</el-button>
            </div>
        </div>
        <div>
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" >
                <el-form :model="form" style="height: 400px">
                    <el-col :span="12">
                        <el-form-item label="所属商家" :label-width="formLabelWidth">
                            <el-select v-model="form.parentId" filterable placeholder="请选择" style="width: 300px">
                                <el-option
                                        v-for="item in busiOptions"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="店铺名称" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">

                        <el-form-item label="店铺地址" :label-width="formLabelWidth">
                            <!--<el-input v-model="form.address" autocomplete="off" style="width: 300px"></el-input>-->
                            <GodMap :godAdr="godAdr" ref="godmapRef"></GodMap>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="店铺状态" :label-width="formLabelWidth">
                            <el-select v-model="form.state" filterable placeholder="请选择" style="width: 300px">
                                <el-option
                                        v-for="item in stateOptions"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人" :label-width="formLabelWidth">
                            <el-input v-model="form.person" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" :label-width="formLabelWidth">
                            <el-input v-model="form.phone" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <div>
                        <el-button @click="destoryMap">取 消</el-button>
                        <el-button type="primary" @click="saveAddress">确 定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    stripe>
                <el-table-column
                        prop="id"
                        label="ID"
                        width="90">
                </el-table-column>
                <el-table-column
                        v-if="textHidden"
                        prop="parentId"
                        label="parentId"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="parentName"
                        label="商家"
                        width="120">
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="店铺名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        width="350">
                </el-table-column>
                <el-table-column
                        prop="stateText"
                        label="状态"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="lng"
                        label="经度"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="lat"
                        label="维度"
                        width="120">
                </el-table-column>
                <el-table-column
                        v-if="textHidden"
                        prop="province"
                        label="省"
                        width="120">
                </el-table-column>
                <el-table-column
                        v-if="textHidden"
                        prop="city"
                        label="市"
                        width="120">
                </el-table-column>
                <el-table-column
                        v-if="textHidden"
                        prop="adsDetail"
                        label="详细地址"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="person"
                        label="联系人"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="联系电话"
                        width="120">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="openDialog(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">关张</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import GodMap from "../../components/GodMap";
    export default {
        name: "SecAddress",
        data(){
            return {
                activeName:'depmana',
                textHidden:false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                loading:true,
                dialogTitle:'新增店铺',
                tableData: [],
                godAdr:{
                    lng: "",
                    lat: "",
                    address:'',
                },
                form: {
                    id:'',
                    parentId:'',
                    parentName:'',
                    name:'',
                    lng:'',
                    lat:'',
                    address:'',
                    state:0,
                    person:'',
                    phone:''
                },
                busiOptions:[],
                stateOptions:[]
            }
        },
        mounted() {
            this.initSecAddress();
        },
        methods:{
            destoryMap(){
                this.dialogFormVisible = false;
            },
            handleDelete(row){
                this.$confirm('此操作将使： ['+row.name+'] 关张, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.state = 2;
                    this.putRequest("/secbusiness/address/saveAddress",row).then(resp=>{
                        if(resp){
                            this.initSecAddress();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            saveAddress(){
                const godmapValue = this.$refs.godmapRef;
                this.form.lat = godmapValue.form.lat;
                this.form.lng = godmapValue.form.lng;
                this.form.address = godmapValue.form.address;
                if(this.dialogTitle=='新增店铺'){
                    this.postRequest("/secbusiness/address/addAddress",this.form).then(resp=>{
                        if(resp){
                            this.dialogFormVisible = false;
                            this.initSecAddress();
                        }
                    })
                }else{
                    this.putRequest("/secbusiness/address/saveAddress",this.form).then(resp=>{
                        if(resp){
                            this.dialogFormVisible = false;
                            this.initSecAddress();
                        }
                    })
                }

            },
            openDialog(row){
                this.getRequest("/secbusiness/address/initSecBusi").then(resp=>{
                    if(resp){
                        this.busiOptions = resp.data.listBusi;
                        this.stateOptions = resp.data.listState;
                        this.dialogFormVisible = true;
                    }
                });


                if(row){
                    this.dialogTitle='编辑店铺';
                    this.form.id=row.id;
                    this.form.name=row.name;
                    this.form.parentId=row.parentId;
                    this.godAdr.lng=row.lng;
                    this.godAdr.lat=row.lat;
                    this.godAdr.address=row.address;
                    this.form.state =row.state;
                    this.form.person =row.person;
                    this.form.phone =row.phone;
                }else{
                    this.dialogTitle='新增店铺';
                    this.form.id='';
                    this.form.name='';
                    this.form.parentId=-1;
                    this.godAdr.lng='';
                    this.godAdr.lat='';
                    this.godAdr.address='';
                    this.form.address ='';
                    this.form.state =-1;
                    this.form.person ='';
                    this.form.phone ='';
                }
                if(this.godAdr.address =='' ||this.godAdr.lng ==''  ||this.godAdr.lng ==null ){
                    this.godAdr.lng='108.94859';
                    this.godAdr.lat='34.22252';
                    this.godAdr.address='陕西省西安市雁塔区小寨路街道雁塔区西安市雁塔区人民政府';
                }
                const godmapValue = this.$refs.godmapRef;
                if(godmapValue){
                    godmapValue.reset();
                }
            },
            initSecAddress(){
                this.getRequest("/secbusiness/address/initSecAddress").then(resp=>{
                    if(resp){
                        this.tableData = resp.data;
                    }
                });

            }
        },
        components:{
            GodMap
        }

    }
</script>

<style scoped>

</style>